<template>
  <div id="change-pay-password-captcha-view" class="stepper">
    <div class="upper">
      <div class="title">输入验证码</div>
    </div>
    <div class="desc">
      6位数字验证码已经发送至
      <a>{{this.currentPhone}}</a>
    </div>
    <div class="captcha-input-box">
      <captcha-box ref="captchaBox" v-model="captcha" :maxlength="6" autofocus @submit="onCaptchaSubmit" />
    </div>
    <div class="captcha-status">
      <div v-if="sent">
        <a>{{countdownTimer}}秒</a>后重新获取验证码
      </div>
      <div v-if="!sent" class="row">
        <a @click="getCaptcha('1')">重新发送验证码</a>
        <a class="ml-2" @click="getCaptcha('2')">语音验证</a>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/snyc_nav_fh.svg';
import { Toast, Icon, Dialog } from 'mand-mobile';
import { mapGetters } from 'vuex';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Loading from '@/components/loading';
import http from '@/common/http';
import CaptchaBox from '@/components/CaptchaBox';
export default {
  name: 'captcha-view',
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [CaptchaBox.name]: CaptchaBox
  },
  data() {
    return {
      currentPhone: '',
      captcha: '',
      sent: false,
      countdownInstance: null,
      countdownTimer: 59,
      action: 'change'
    };
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      http.post('/pakj/passenger/getUserInfo').then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          this.currentPhone = decryptByDESModeEBC(res.data.data.user_phone);
          this.getCaptcha();
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    } else {
      if (this.currentUser.user_phone !== '') {
        this.currentPhone = this.currentUser.user_phone;
        this.getCaptcha();
      }
    }
    if (this.$route.query.action) {
      this.action = this.$route.query.action;
    }
  },
  methods: {
    onCaptchaSubmit() {
      this.$store
        .dispatch('checkCaptcha', { user_phone: this.currentPhone, mobileCode: this.captcha })
        .then(() => {
          this.$router.replace({
            name: 'ChangePayPassword',
            query: {
              type: 1,
              action: this.action
            }
          });
        })
        .catch(reason => {
          Toast({
            content: reason.message,
            duration: 2000
          });
          this.$refs.captchaBox.reset();
        });
    },
    getCaptcha(type = '1') {
      let params = {
        type: '4',
        user_phone: this.currentPhone,
        code_type: type
      };
      if (this.currentPhone && this.currentPhone !== '') {
        this.$store.dispatch('getCaptchNew', params).then(result => {
          this.$refs.captchaBox.focus();
          this.startCountdown();
        });
      } else {
        let self = this;
        Dialog.alert({
          title: 'ERROR',
          content: 'PHONE NUMBER REQUIRED',
          onConfirm: () => {
            self.$router.go(-1);
          }
        });
      }
    },
    startCountdown() {
      this.sent = true;
      this.countdownInstance = setInterval(() => {
        this.countdownTimer--;
        if (this.countdownTimer <= 0) {
          this.sent = false;
          clearInterval(this.countdownInstance);
          this.countdownInstance = null;
          this.countdownTimer = 59;
        }
      }, 1000);
    }
  },
  computed: {
    ...mapGetters(['currentUser'])
  }
};
</script>
<style lang="stylus">
#change-pay-password-captcha-view {
  padding: 40px;

  a {
    color: color-primary;
  }

  .upper {
    margin-top: 62px;
  }

  .desc {
    margin-bottom: 80px !important;
  }

  .captcha-input-box {
    .md-codebox {
      justify-content: flex-start;
    }
  }

  .captcha-status {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #999999;
    line-height: 24px;
  }
}
</style>